<template>
  <view class="addWork" style="padding: 20rpx 40rpx" @click="closeTooltip">
    <view class="line"><text></text></view>
    <!-- <view class="top">
            <view style="font-size: 32rpx;color: #333;font-weight: bold;">添加记录</view>
        </view> -->
    <scroll-view scroll-y="true" style="height: 60vh; padding-top: 20rpx">
      <view class="content">
        <view class="title">添加-故障部件</view>
        <view class="content_item">
          <view class="name"
            >故障部件
            <text>*</text>
          </view>
          <repair-fitting
            :elevatorId="workOrderDetail.elevatorId"
            :disabledArr="disabledArr"
            @repairFit="getPart"
            :proof="proofPart"
            ref="repairFitting"
          ></repair-fitting>
        </view>
        <view class="notice">
          <div style="display: flex; justify-content: space-between">
            <view class="name">
              <view>故障描述</view>
              <view style="color: #e54b4b">*</view>
              <zb-tooltip placement="bottom-start" ref="tooltip_1">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class="">电梯部件具体出现了什么问题或现象</view>
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('fault_desc')"
              >示例
            </view>
          </div>
          <view
            class="area"
            :style="{
              borderColor: formError.includes('mfDesc') ? '#e02020' : '',
            }"
          >
            <textarea
              v-model="updateMsg.mfDesc"
              :placeholder="
                formFocus == 'mfDesc' ? '' : '示例：厅门无法正常闭合'
              "
              placeholder-class="textare"
              style="font-size: 28rpx; height: 80rpx; width: 100%"
              maxlength="200"
              :always-embed="true"
              @blur="
                !updateMsg.mfDesc ? (updateMsg.mfDesc = '') : '',
                  updateMsg.mfDesc ? '' : formError.push('mfDesc'),
                  (formFocus = '')
              "
              @focus="
                formError.includes('mfDesc') &&
                  formError.splice(formError.indexOf('mfDesc'), 1),
                  (formFocus = 'mfDesc')
              "
            />
            <view class="length">{{
              (updateMsg.mfDesc ? updateMsg.mfDesc.length : "0") + "/200"
            }}</view>
          </view>
          <view
            v-if="formError.includes('mfDesc')"
            style="color: #e02020; font-size: 24rpx"
            >请输入故障描述</view
          >
        </view>
        <view class="imgBox">
          <view style="display: flex; justify-content: space-between">
            <view class="name" style="display: flex"
              >故障部件-图片/视频
              <text>*</text>
              <zb-tooltip placement="bottom" ref="tooltip_2">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class="">出现问题无法正常运行的部件图片/视频</view>
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('fault_image')"
              >示例
            </view>
          </view>
          <image-drag-sort
            tips="上传图片"
            :max="9"
            @changeList="changeImgUrl"
            :list="updateMsg.partImg"
          >
          </image-drag-sort>
          <view v-if="proofPartImg" style="color: #e02020; font-size: 24rpx"
            >请上传图片/视频</view
          >
        </view>
      </view>
      <view class="content">
        <view class="title">添加-维修记录</view>
        <view class="content_item">
          <view class="name"
            >维修类型
            <text
              v-if="status == 4 && workOrderDetail.updateStatus"
              style="color: #e54b4b"
              >*</text
            >
          </view>
          <view class="reasonContent">
            <view
              :class="obj.disposeType == item.value ? 'active' : ''"
              v-for="(item, index) in list"
              :key="index"
              @click="chooseItem(item)"
            >
              {{ item.label }}
            </view>
          </view>
          <view v-if="proofType" style="color: #e02020; font-size: 24rpx"
            >请选择维修类型</view
          >
        </view>
        <view class="notice">
          <div style="display: flex; justify-content: space-between">
            <view class="name">
              <view>维修处理过程-描述</view>
              <view>(选填)</view>
              <zb-tooltip placement="bottom" ref="tooltip_3">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class="">对电梯进行了什么维修操作，</view>
                  <view class="" style="color: #ffffff"
                    >包含功能调整/清洁/润滑/更换配件等</view
                  >
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('record_desc')"
              >示例
            </view>
          </div>
          <view class="area">
            <textarea
              v-model="obj.disposeDesc"
              :placeholder="
                formFocus === 'disposeDesc'
                  ? ''
                  : '示例：对厅门地坎进行了碎石清理'
              "
              placeholder-class="textare"
              style="font-size: 28rpx; height: 80rpx; width: 100%"
              maxlength="100"
              :always-embed="true"
              @blur="formFocus = ''"
              @focus="formFocus = 'disposeDesc'"
            />
            <view class="length">{{
              (obj.disposeDesc ? obj.disposeDesc.length : "0") + "/100"
            }}</view>
          </view>
        </view>
        <view class="imgBox">
          <view style="display: flex; justify-content: space-between">
            <view class="name" style="display: flex"
              >维修处理过程-图片/视频<text
                v-if="status == 4 && workOrderDetail.updateStatus"
                style="color: #e54b4b"
                >*</text
              >
              <zb-tooltip placement="bottom" ref="tooltip_4">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class="">对电梯部件进行操作调整的图片/视频</view>
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('record_image')"
              >示例
            </view>
          </view>

          <!-- <image-drag-sort-idx
            tips="上传图片"
            :max="9"
            @changeList="changeImg"
            :list="obj.disposeImgUrl"
          ></image-drag-sort-idx> -->
          <image-drag-sort
            tips="上传图片"
            :max="9"
            @changeList="changeImg"
            :list="obj.disposeImgUrl"
          >
          </image-drag-sort>
          <view v-if="proofTypeImg" style="color: #e02020; font-size: 24rpx"
            >请上传图片/视频</view
          >
        </view>
      </view>
      <view class="content">
        <view class="title">添加-维修结果</view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view style="display: flex; justify-content: space-between">
            <view class="name" style="margin-bottom: 20rpx; display: flex">
              故障原因
              <text
                v-if="status == 4 && workOrderDetail.updateStatus"
                style="color: #e54b4b"
                >*</text
              >
              <zb-tooltip placement="bottom-start" ref="tooltip_5">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class="">导致电梯故障的具体原因是什么</view>
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('finish_reason')"
              >示例
            </view>
          </view>
          <view class="">
            <view @click="chooseFault" :class="['falutReasonTitle',faultReasonItem.length?'faultAct':'']">
              选择原因
              <uni-icons :color="faultReasonItem.length?'#0091ff':'#ccc'" size="16" type="arrowright" />
              </view>
          
            <view v-if="faultReasonItem.length" class="chooseReason">
              已选原因:{{ faultReasonItemNames.join('、') }}
              <text class="clear" @click="clearReason">清空</text>
            </view>
        
          </view>
          <view v-if="proofReason&&!faultReasonItem.length" style="color: #e02020; font-size: 24rpx"
            >请选择故障原因</view
          >
          <input
            type="text"
            v-if="faultReasonItemNames.includes('其他')"
            placeholder="请输入其他故障原因"
            class="other"
            v-model="faultReasonOtherDesc"
            :style="{
              borderColor:
              faultReasonItemNames.includes('其他') &&
                proofReasonOther &&
                !faultReasonOtherDesc
                  ? '#e02020'
                  : '',
            }"
          />
          <view
            v-if="
            faultReasonItemNames.includes('其他') &&
              proofReasonOther &&
              !faultReasonOtherDesc
            "
            style="color: #e02020; font-size: 24rpx"
          >
            请输入其他故障原因</view
          >
        </view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view class="name" style="margin-bottom: 20rpx">
            配件更换
            <text
              v-if="status == 4 && workOrderDetail.updateStatus"
              style="color: #e54b4b"
              >*</text
            >
          </view>
          <view class="reasonContent">
            <view
              v-for="(item, index) in partList"
              :key="index"
              :class="partsOpe == item.value ? 'active' : ''"
              @click="partsOpe = item.value"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view style="display: flex; justify-content: space-between">
            <view class="name" style="display: flex">
              故障说明
              <text
                v-if="status == 4 && workOrderDetail.updateStatus"
                style="color: #e54b4b"
                >*</text
              >
              <zb-tooltip placement="bottom-start" ref="tooltip_6">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view class=""
                    >对电梯进行了什么维修操作，使电梯恢复正常运行</view
                  >
                </view>
              </zb-tooltip>
            </view>
            <view
              style="color: #0091ff; margin-left: 8rpx; font-size: 24rpx"
              @click="showExample('finish_desc')"
              >示例
            </view>
          </view>
          <view
            class="area"
            :style="{
              borderColor: formError.includes('faultDesc') ? '#e02020' : '',
            }"
          >
            <textarea
              v-model="faultDesc"
              :placeholder="
                formFocus === 'faultDesc'
                  ? ''
                  : '示例：对厅门地坎进行了碎石清理，厅门闭合正常，电梯已恢复正常运行'
              "
              placeholder-class="textare"
              style="font-size: 28rpx; height: 150rpx; width: 100%"
              maxlength="200"
              :always-embed="true"
              @blur="
                (formFocus = ''), faultDesc ? '' : formError.push('faultDesc')
              "
              @focus="
                formError.includes('faultDesc') &&
                  formError.splice(formError.indexOf('faultDesc'), 1),
                  (formFocus = 'faultDesc')
              "
            />
            <view class="length">{{
              (faultDesc ? faultDesc.length : "0") + "/200"
            }}</view>
          </view>
          <view
            v-if="formError.includes('faultDesc')"
            style="color: #e02020; font-size: 24rpx"
            >请输入故障说明</view
          >
        </view>
        <view class="faultItem">
          <view style="display: flex; justify-content: space-between">
            <view class="name" style="margin-bottom: 24rpx; display: flex">
              维修完成-图片/视频
              <text
                v-if="status == 4 && workOrderDetail.updateStatus"
                style="color: #e54b4b"
                >*</text
              >
              <zb-tooltip placement="bottom" ref="tooltip_7">
                <image
                  class="msg-img"
                  src="@/static/images/index/q.png"
                ></image>
                <view
                  class="tipsContent"
                  slot="content"
                  style="text-align: left"
                >
                  <view>进行维修操作后，</view>
                  <view style="color: #ffffff"
                    >电梯或部件恢复正常运行的图片与视频</view
                  >
                </view>
              </zb-tooltip>
            </view>
            <view
              style="
                color: #0091ff;
                margin-left: 8rpx;
                font-size: 24rpx;
                font-weight: normal;
              "
              @click="showExample('finish_image')"
              >示例</view
            >
          </view>
          <image-drag-sort
            tips="上传图片"
            :max="9"
            @changeList="changeImgReason"
            :list="faultImg"
          >
          </image-drag-sort>
          <view v-if="proofReasonImg" style="color: #e02020; font-size: 24rpx"
            >请上传图片/视频</view
          >
        </view>
      </view>
    </scroll-view>
    <view class="save"
      ><button hover-class="none" @click="handleSave">
        {{ submitLoading ? "提交中" : "确定" }}
      </button></view
    >
  </view>
</template>
<script>
import { getDerviceTime } from '@/apis/system';
import RepairFitting from '@/components/repairFitting/repairFitting.vue';
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import ImageDragSortIdx from '@/components/image-drag-sort/index.vue';
import { submitWork } from '@/apis/barrierSearch.js';
import { update } from '@/apis/repair.js';
import { editCHeckRecord } from '@/apis/workOrder.js';
import { mapState } from 'vuex';
// import faultTree from '@/components/select-tree/select-tree.vue';

export default {
	components: {
		ImageDragSort,
		ImageDragSortIdx,
		RepairFitting,
		
	},
	props: {
		reasonList: {
			type: Array,
		},
		otherId: {
			type: String,
		},
		planId: {
			type: String,
		},
		disabledArr: {
			type: Array,
		},
		status: {
			type: Number,
			default: 1,
		},
		workOrderDetail: {
			type: Object,
			default: {},
		},
		// 任务原因树形结构
		falutTreeList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	data() {
		return {
			obj: {
				disposeImgUrl: [],
				disposeDesc: '',
				disposeType: '',
				checkTypeId: '',
				partIds: '',
				checkContentId: '',
				partNames: '',
			},
			list: [
				{
					value: 1,
					label: '设备维修',
				},
				{
					value: 2,
					label: '更换配件',
				},
			],
			faultReasonItem: [],
			faultReasonOtherDesc: '',
			faultDesc: '',
			partsOpe: 1,
			faultImg: [],
			updateMsg: {
				partImg: [],
				mfDesc: '',
			},

			proofPart: false, // 校验 部件
			proofPartImg: false, // 校验 部件 图片视频

			proofType: false, // 校验 维修类型
			proofTypeImg: false, // 校验 维修 图片

			proofReasonImg: false, // 校验 处理结果 图片视频
			proofReason: false, // 校验 处理结果 原因
			proofReasonOther: false, // 校验 处理结果 其他原因
			other: '',
			partList: [
				{
					value: 1,
					label: '无需更换',
				},
				{
					value: 2,
					label: '建议更换',
				},
				{
					value: 3,
					label: '已更换',
				},
			],
			formFocus: '', // 当前获取焦点表单
			formError: [], // 校验错误
			submitLoading: false, // 提交按钮loading
		
			faultReasonItemNames:[]// 故障原因名字
		};
	},
	watch: {
		// faultReasonItem: {
		// 	deep: true,
		// 	handler(newVal, oldVal) {
		// 		if (!newVal.includes(this.otherId)) {
		// 			this.faultReasonOtherDesc = '';
		// 		}
		// 	},
		// },
	},
	created() {

	},
	methods: {
		closeReasonDialog() {
			console.log('关闭');
		},
		// 选择故障原因
		chooseFault() {
			uni.$emit('updateFalut' + this.planId,{msg:this.faultReasonItem,name:'addWork',type:'open'});
			uni.$once('getFalut',(data)=> {
				console.log('获取数据父组件的数据',data);
				this.faultReasonItem = data.data.ids || [];
				this.faultReasonItemNames = data.data.names || [];
			  this.proofReason = false;
			});
		},
		// 清空原因
		clearReason() {
			console.log('清除');
			this.faultReasonItem = [];
			this.faultReasonItemNames = [];
		},
		// 清空数据
		clear() {
			this.partsOpe = 1;
			this.faultReasonItem = [];
			this.faultReasonItemNames = [];
			this.faultReasonOtherDesc = '';
			this.faultDesc = '';
			this.faultImg = [];
			this.updateMsg = {
				partImg: [],
				mfDesc: '',
				partNames: '',
				partIds: '',
			};
			this.obj = {
				disposeImgUrl: [],
				disposeDesc: '',
				disposeType: '',
				checkTypeId: '',
				partIds: '',
				checkContentId: '',
				partNames: '',
			};
			this.$refs.repairFitting.selectedText = '';
			this.$refs.repairFitting.names = '';
			this.$refs.repairFitting.other = '';
			this.$refs.repairFitting.ids = [];
			this.proofReason = false;
		},
		// 故障部件 选择部件
		getPart(res, curName) {
			console.log('getPart', res);
			let partIds = res.ids;
			let partNames = res.names;
			this.other = res.other;
			if (res.flag && res.flag.id) {
				this.updateMsg.floorStandIds = res.flag.ids.join(',');
				this.updateMsg.floorStandNames = res.flag.names.join(',');
			} else {
				delete this.updateMsg.floorStandIds;
				delete this.updateMsg.floorStandNames;
			}
			this.updateMsg.partIds = partIds.join(',');
			this.updateMsg.partNames = partNames.join('&&');
			this.proofPart = false;
		},
		// 故障部件 图片上传
		changeImgUrl(val) {
			console.log(val, 'val的值');
			this.updateMsg.partImg = val;
			this.proofPartImg = false;
		},
		// 维修记录 选择维修类型
		chooseItem(item) {
			this.obj.disposeType = item.value;
			this.proofType = false;
			if (item.value === 2) {
				this.partsOpe = 3;
			}
		},
		// 维修记录 图片上传
		changeImg(val) {
			console.log(val, 'val的值');
			this.obj.disposeImgUrl = val;
			this.proofTypeImg = false;
		},

		// 处理结果 选择故障原因
		// chooseItemReason(item, index) {
		// 	if (!this.faultReasonItem.includes(item.dictKey)) {
		// 		this.faultReasonItem.push(item.dictKey);
		// 	} else {
		// 		let faultIndex = this.faultReasonItem.findIndex(
		// 			(e) => e == item.dictKey
		// 		);
		// 		this.faultReasonItem.splice(faultIndex, 1);
		// 	}
		// 	this.proofReason = false;
		// },
		// 处理结果  图片上传
		changeImgReason(val) {
			console.log(val, 'val的值');
			this.faultImg = val;
			this.proofReasonImg = false;
		},

		// 确认
		async handleSave() {
			if (this.submitLoading) return;
			// 清空校验
			this.formError = [];
			// 故障部件
			if (!this.updateMsg.partNames) {
				uni.showToast({
					title: '请选择故障部件',
					icon: 'none',
					mask: true,
				});
				this.proofPart = true;
				return;
			}
			if (!this.updateMsg.mfDesc) {
				this.formError.push('mfDesc');
				uni.showToast({
					title: '请填写故障描述',
					icon: 'none',
				});
				return;
			}
			if (this.updateMsg.partImg.length == 0) {
				uni.showToast({
					title: '请上传故障部件图片或视频',
					icon: 'none',
					mask: true,
				});
				this.proofPartImg = true;
				return;
			}
			// this.status == 4 && this.workOrderDetail.updateStatus 维修工单已完成 24小时内重新添加记录验证一下
			// 维修记录
			const { disposeImgUrl, disposeDesc, disposeType } = this.obj;
			if (
				disposeImgUrl.length ||
        disposeType ||
        disposeDesc ||
        (this.status == 4 && this.workOrderDetail.updateStatus)
			) {
				if (!disposeType) {
					this.proofType = true;
					uni.showToast({
						title: '请选择维修类型',
						icon: 'none',
					});

					return false;
				}
				if (!disposeImgUrl.length) {
					this.proofTypeImg = true;
					uni.showToast({
						title: '请上传维修处理过程图片或视频',
						icon: 'none',
					});
					return false;
				}
			}

			// 处理结果
			if (
				this.faultImg.length ||
        this.faultReasonItem.length ||
        this.faultDesc ||
        (this.status == 4 && this.workOrderDetail.updateStatus)
			) {
				if (!this.faultReasonItem.length) {
					this.proofReason = true;
					uni.showToast({
						title: '请选择故障原因',
						icon: 'none',
					});

					return false;
				}
				if (this.faultReasonItemNames.includes('其他')) {
					if (!this.faultReasonOtherDesc) {
						this.proofReasonOther = true;
						uni.showToast({
							title: '请填写其他故障原因',
							icon: 'none',
						});

						return false;
					}
				}
				if (!this.faultDesc) {
					this.formError.push('faultDesc');
					uni.showToast({
						title: '请填写故障说明',
						icon: 'none',
					});

					return false;
				}
				if (this.faultImg.length == 0) {
					this.proofReasonImg = true;
					uni.showToast({
						title: '请上传部件完成维修图片或视频',
						icon: 'none',
					});

					return false;
				}
			}
			this.submitLoading = true;
			const params = {
				faultImg: this.faultImg,
				faultReasonItem: this.faultReasonItem.join(','),
				faultReasonOtherDesc: this.faultReasonOtherDesc,
				faultDesc: this.faultDesc,
				partsOpe: this.partsOpe,
			};
			const { data } = await getDerviceTime();
			submitWork({
				...params,
				planFrom: '5',
				status: '2', // 判断是否为后续新增的记录 默认写死2
				planId: this.planId,
				mfDesc: this.updateMsg.mfDesc,
				partsIds: this.updateMsg.partIds,
				mfImgUrl: this.updateMsg.partImg,
				partsNames: this.updateMsg.partNames,
				userId: this.userinfo.user_id,
				phone: this.userinfo.phone,
				name: this.userinfo.nick_name,
				faultSubmitTime: data,
				faultSubmitUser: this.userinfo.user_id,
				floorStandIds: this.updateMsg.floorStandIds,
				floorStandNames: this.updateMsg.floorStandNames,
			}).then(async (res) => {
				if (this.other) {
					let partsIds = this.updateMsg.partIds.split(',');
					this.addCustompartslog({
						partId: partsIds[partsIds.length - 1],
						other: this.other,
						planId: this.planId,
						fromLocation: 'pageModules/parts/applyParts',
					});
				}
				await editCHeckRecord({
					planId: this.planId,
					userId: this.userinfo.user_id,
					checkHistoryId: res.data,
					recordLog: '创建',
				});
				let obj = JSON.parse(JSON.stringify(this.obj));
				obj.partIds = this.updateMsg.partIds;
				obj.partNames = this.updateMsg.partNames;
				obj.floorStandIds = this.updateMsg.floorStandIds;
				obj.floorStandNames = this.updateMsg.floorStandNames;
				obj.disposeDesc = obj.disposeDesc;
				update({
					...obj,
					planId: this.planId,
					userId: this.userinfo.user_id,
					worksId: res.data,
				}).then((updateMsg) => {
					this.addMsg(updateMsg.data);
					setTimeout(() => {
						this.submitLoading = false;
					}, 500);
				});
			});
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true,
			});
			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				checkHistoryId,
				recordLog: '创建',
				recordDataValue: this.obj,
			};
			editCHeckRecord(params).then((res) => {
				uni.hideLoading();
				uni.showToast({
					title: '新增成功',
					icon: 'success',
				});
				this.$emit('add');
			});
		},
		showExample(type) {
			this.$emit('showExample', type);
		},
		closeTooltip() {
			// console.log(this.$refs['tooltip'],'this.$refs.tooltip');
			// this.$refs.tooltip.close();
			for (let index = 0; index < 8; index++) {
				if (this.$refs['tooltip_' + index]) {
					this.$refs['tooltip_' + index].close();
				}
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.addWork {
  background: #ffffff;
  border-radius: 8rpx;
  box-sizing: border-box;
  box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  padding: 20rpx 0 !important;

  .line {
    display: flex;
    justify-content: center;

    text {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
  }

  .content {
    padding: 0 40rpx;
    padding-bottom: 20rpx;

    .title {
      // border-left: 4rpx solid #0091ff;
      // margin-left: -40rpx;
      // padding-left: 20rpx;
      margin-bottom: 20rpx;
      font-weight: bold;
      color: #333;
      font-size: 32rpx;
    }
  }

  .content_item {
    margin-bottom: 16rpx;

    .name {
      font-size: 26rpx;
      margin-bottom: 16rpx;
      font-weight: bold;
      color: #333;
      border-left: 4rpx solid #0091ff;
      padding-left: 10rpx;

      text {
        color: #e54b4b;
      }
    }

    .reasonContent {
      display: flex;
      flex-wrap: wrap;

      view {
        width: 30%;
        height: 48rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        margin-right: 18rpx;
      }

      .active {
        color: #0091ff;
        border-color: #0091ff;
      }
    }
  }

  .notice {
    width: 100%;
    padding-bottom: 20rpx;

    .name {
      display: flex;
      font-weight: bold;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 16rpx;
      border-left: 4rpx solid #0091ff;
      padding-left: 10rpx;

      :nth-child(2) {
        font-weight: normal;
        color: #999999;
      }
    }

    .area {
      padding: 20rpx;
      border: 2rpx solid #e9e9e9;
    }

    textarea {
      font-size: 28rpx;
    }

    .length {
      text-align: right;
      color: #ccc;
    }
  }

  .imgBox {
    .name {
      margin-bottom: 16rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
      border-left: 4rpx solid #0091ff;
      padding-left: 10rpx;

      text {
        color: #e54b4b;
      }
    }
  }

  .faultItem {
    .name {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;
      border-left: 4rpx solid #0091ff;
      padding-left: 10rpx;

      text {
        color: #999;
      }
    }

    .area {
      border: 2rpx solid #e9e9e9;
      padding: 20rpx;
      margin-top: 20rpx;

      .length {
        text-align: right;
        // padding-bottom: 20rpx;
        color: #ccc;
      }
    }

    .reasonContent {
      // margin-bottom: 52rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      view {
        width: 30%;
        height: 48rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
      }

      .active {
        color: #0091ff;
        border-color: #0091ff;
      }
    }

    .other {
      width: 100%;
      height: 80rpx;
      border: 2rpx solid #e9e9e9;
      border-radius: 4rpx;
      padding-left: 28rpx;
      box-sizing: border-box;
      margin-top: 24rpx;
    }
  }

  .save {
    margin-top: 18rpx;
    display: flex;
    justify-content: center;

    button {
      display: flex;
      width: 670rpx;
      height: 70rpx;
      border-radius: 8rpx;
      justify-content: center;
      align-items: center;
    }
  }
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
}

.msg-img {
  width: 28rpx;
  height: 28rpx;
  padding-top: 6rpx;
}
.falutReasonTitle{
  border-radius: 4px;
box-sizing: border-box;
border: 1px solid #ccc;
width: 216rpx;
height: 48rpx;
display: flex;
justify-content: center;
align-items: center;
color: #666;
}
.faultAct{
  border-color: #0091FF;
  color: #0091ff;
}

.chooseReason{
  color: #333;
  margin-top: 10rpx;
  .clear{
  margin-left: 16rpx;
  color: #0091FF;
}
}
</style>
